import React,{Component} from 'react'
import {
    Route,
    Link
} from 'react-router-dom'
export default class Person extends Component{
    state = {
        PEEPS:[
            { id: 0, name: 'Michelle', friends: [ 1, 2, 3 ] },
            { id: 1, name: 'Sean', friends: [ 0, 3 ] },
            { id: 2, name: 'Kim', friends: [ 0, 1, 3 ], },
            { id: 3, name: 'David', friends: [ 1, 2 ] }
        ]
    }
    info = (id)=>{
        return this.state.PEEPS.filter((p)=>{
            return p.id === id;
        })
    }
    render(){
        const {match} = this.props
        const person = this.info(match.params.id)
        return(
            <div>
                <h3>{person[0].name}’s Friends</h3>
                <ul>
                    {person[0].friends.map(id => (
                    <li key={id}>
                        <Link to={`${match.url}/${id}`}>
                        {this.info(id)[0].name}
                        </Link>
                    </li>
                    ))}
                </ul>
                <Route path={`${match.url}/:id`} component={Person}/>
            </div>
        )
    }
}